<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>试题练习管理系统</title>
	<style>
		pre {
			white-space: pre-wrap;
			/* 保留空白符序列，并正常进行换行 */
			white-space: -moz-pre-wrap;
			/* 兼容火狐浏览器 */
			white-space: -webkit-pre-wrap;
			/* 兼容谷歌浏览器 */
			white-space: -o-pre-wrap;
			/* 兼容opera浏览器 */
			word-wrap: break-word;
			/* 允许字母、url地址换行 */
		}
		.op-class label {
			color: #67c23a!important;
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="10">
				<el-button type="primary" @click="openChapter(null)">添加章节</el-button>
				<el-button type="danger" @click="delAllChapter()">删除章节</el-button>
				<el-table ref="chapterTable" :data="chapters" @selection-change="chapterSelectionChange"  border highlight-current-row style="width: 100%">
					<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
					<el-table-column prop="chapterTitle" label="名称">
						<template slot-scope="scope">
							<el-button @click="showTopic(scope.row)" type="text" size="small">{{scope.row.chapterTitle}}</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="chapterWeight" label="权重">
					</el-table-column>
					<el-table-column prop="chapterRemark" label="备注">
					</el-table-column>
					<!--<el-table-column prop="chapterTime" label="创建时间">
					</el-table-column>-->
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openChapter(scope.row)" type="text" size="small">修改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delChapter(scope.row.chapterId)">
								<el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="14">
				<el-button type="text" style="color: #303133;">【{{selectChapter?.chapterTitle}}】题目列表</el-button>
				<el-button type="primary" style="float: right;" @click="openTopic(null)">添加题目</el-button>
				<el-button type="danger" style="float: right;" @click="delAllTopic()">删除题目</el-button>
				<el-table ref="topicTable" :data="topics" @selection-change="topicSelectionChange" border highlight-current-row style="width: 100%">
					<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
					<el-table-column prop="topicTitle" label="题目">
					</el-table-column>
					<el-table-column prop="topicType" label="题型" width="100px">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.topicType === 0">单选题</el-tag>
							<el-tag v-if="scope.row.topicType === 1" type="success">多选题</el-tag>
							<el-tag v-if="scope.row.topicType === 2" type="info">填空题</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="选项" width="100px">
						<template slot-scope="scope">
							<el-button @click="openTopicDetail(scope.row)" type="text" size="small">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="topicLevel" label="难度" width="100px">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.topicLevel*1 === 0">初级</el-tag>
							<el-tag v-if="scope.row.topicLevel*1 === 1" type="warning">中级</el-tag>
							<el-tag v-if="scope.row.topicLevel*1 === 2" type="danger">高级</el-tag>
						</template>
					</el-table-column>
					<!--<el-table-column prop="topicTime" label="创建时间">
					</el-table-column>-->
					<el-table-column label="操作" width="100px">
						<template slot-scope="scope">
							<el-button @click="openTopic(scope.row)" type="text" size="small">修改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delTopic(scope.row.topicId)">
								<el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog title="章节设置" :visible.sync="chapterForm.visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-form :model="chapterForm" :rules="chapterRules" ref="chapterForm" label-width="100px">
				<el-form-item label="名称" prop="chapterTitle">
					<el-input v-model="chapterForm.chapterTitle"></el-input>
				</el-form-item>
				<el-form-item label="权重" prop="chapterWeight">
					<el-input v-model="chapterForm.chapterWeight">
						<template slot="append">%</template>
					</el-input>
				</el-form-item>
				<el-form-item label="备注" prop="chapterRemark">
					<el-input v-model="chapterForm.chapterRemark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeChapter">取 消</el-button>
				<el-button type="primary" @click="saveChapter">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title="题目设置" :visible.sync="topicForm.visible" width="45%" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-form :model="topicForm" :rules="topicRules" ref="topicForm" label-width="100px">
				<el-form-item label="所属章节">
					{{selectChapter?.chapterTitle}}
				</el-form-item>
				<el-form-item label="题目" prop="topicTitle">
					<el-input type="textarea" v-model="topicForm.topicTitle"
						:autosize="{ minRows: 3, maxRows: 5}" maxlength="300" show-word-limit></el-input>
				</el-form-item>
				<!--<el-form-item label="内容" prop="topicContent">
			    <el-input type="textarea" v-model="topicForm.topicContent" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
			  </el-form-item>-->
				<el-form-item label="题型" prop="topicType">
					<el-radio-group v-model="topicForm.topicType" :disabled="topicForm.topicId?true:false" @input="typeInput">
						<el-radio v-for="item in topicTypes" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-for="(option, index) in topicForm.options" :label="changeOpText(index)"
					:key="option.optionId" :prop="'options.' + index + '.optionText'"
					v-show="topicForm.topicType && (topicForm.topicType*1 === 0 || topicForm.topicType*1 == 1)"
					:rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
					class="op-class">
					<el-row :gutter="20">
						<el-col :span="15">
							<el-input type="textarea" v-model="option.optionText"
								:autosize="{ minRows: 2, maxRows: 4}"></el-input>
						</el-col>
						<el-col :span="5">
							<el-button @click.prevent="removeOption(option)">删除</el-button>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item v-show="topicForm.topicType && (topicForm.topicType*1 === 0 || topicForm.topicType*1 === 1)">
					<el-button @click="addOption">新增选项</el-button>
				</el-form-item>
				<el-form-item label="答案(单选)" prop="topicAnswer"
					v-show="topicForm.topicType && topicForm.topicType*1 === 0"
					:rules="{ required: topicForm.topicType &&topicForm.topicType === 0, message: '请输入', trigger: 'blur' }">
					<el-select style="width:100%" v-model="topicForm.topicAnswer" placeholder="请选择">
						<el-option v-for="(item, index) in topicForm.options" :key="item.optionId" :label="changeOpText(index)"
							:value="item.optionId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="答案(多选)" prop="topicAnswers"
					v-show="topicForm.topicType && topicForm.topicType == 1"
					:rules="{ required: topicForm.topicType &&topicForm.topicType === 1, message: '请输入', trigger: 'blur' }">
					<el-select style="width:100%" v-model="topicForm.topicAnswers" multiple placeholder="请选择">
						<el-option v-for="(item, index) in topicForm.options" :key="item.optionId" :label="changeOpText(index)"
							:value="item.optionId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="答案(填空)" prop="topicAnswer"
					v-show="topicForm.topicType && topicForm.topicType == 2"
					:rules="{ required: topicForm.topicType &&topicForm.topicType === 2, message: '请输入', trigger: 'blur' }">
					<el-input v-model="topicForm.topicAnswer"></el-input>
				</el-form-item>
				<el-form-item label="难度" prop="topicLevel">
					<el-radio-group v-model="topicForm.topicLevel" @input="levelInput">
						<el-radio :label="item.value" :key="item.value" v-for="item in topicLevels">{{item.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="解析" prop="topicAnalysis">
					<el-input type="textarea" v-model="topicForm.topicAnalysis"
						:autosize="{ minRows: 4, maxRows: 6}" maxlength="1000" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeTopic">取 消</el-button>
				<el-button type="primary" @click="saveTopic">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title="题目详情" :visible.sync="topicDetail.visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-row>
				<el-col :span="24">
					题目：
					<pre style="width:100%">{{topicDetail.topic?.topicTitle}}</pre>
				</el-col>
				<el-col :span="24" v-show="topicDetail.topic?.topicType !== 2">
					<el-table :data="topicDetail.topic?.options" border highlight-current-row style="width: 100%">
						<el-table-column prop="optionText" label="选项">
						</el-table-column>
						<el-table-column prop="optionAnswer" label="答案">
							<template slot-scope="scope">
								<i class="el-icon-circle-check" v-if="scope.row.optionAnswer === 1"></i>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span="24" v-show="topicDetail.topic?.topicType === 2">
					答案：
					<pre style="width:100%">{{topicDetail.topic?.topicAnswer}}</pre>
				</el-col>
				<el-col :span="24">
					解析：
					<pre style="width:100%">{{topicDetail.topic?.topicAnalysis}}</pre>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeTopicDetail">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		chapters: [],
		topics: [],
		selectChapter: null,
		chapterLimits: chapterLimits,
		topicTypes: topicTypes,
		topicLevels: topicLevels,
		chapterForm: {
			visible: false,
			chapterId: '',
			chapterType: '0',
			chapterTitle: '',
			chapterRemark: '',
			chapterLimit: '0',
			chapterWeight: '',
		},
		chapterRules: {
			chapterTitle: [
				{required: true, message: '请输入', trigger: 'blur'}
			],
			chapterWeight: [
				{required: true, message: '请输入', trigger: 'blur'},
            	{ required: true, validator: countReg, trigger: "blur" }
			]
		},
		topicForm: {
			visible: false,
			topicId: '',
			topicContent: '-',
			topicTitle: '',
			topicType: '0',
			topicLevel: '',
			topicAnswer: '',
			topicAnswers: [],
			topicAnalysis: '',
			options: [],
		},
		topicRules: {
			topicContent: [
				{required: false, message: '请输入', trigger: 'blur'}
			],
			topicTitle: [
				{required: true, message: '请输入', trigger: 'blur'},
				{ min: 1, max: 300, message: '300以内的字数', trigger: 'blur' }
			],
			topicType: [
				{required: true, message: '请选择', trigger: 'blur'}
			],
			topicLevel: [
				{required: true, message: '请选择', trigger: 'blur'}
			],
			topicAnswer: [
				{required: true, message: '请输入', trigger: 'blur'}
			],
			topicAnalysis: [
				{required: true, message: '请输入', trigger: 'blur'},
				{ min: 1, max: 1000, message: '1000以内的字数', trigger: 'blur' }
			]
		},
		topicDetail: {
			visible: false,
			topic: null
		},
		chapterSelection: [],
		topicSelection: []
	}
	let vueMethods = {
		changeOpText(index){
			return ['A', 'B', 'C', 'D', 'E', 'F'][index]
		},
		getChapters() {
			let that = this
			postRequst('/admin/getChapters', that.chapterForm, true).then(function (resp) {
				that.chapters = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectChapter = resp.rows[0]
					that.getTopics()
				}
			})
		},
		getTopics() {
			let that = this
			postRequst('/admin/getChapterTopics', {chapterId: that.selectChapter.chapterId}, true).then(function (resp) {
				that.topics = resp.rows
			})
		},
		showTopic(row) {
			let that = this
			that.selectChapter = row
			that.getTopics()
		},
		openChapter(row) {
			let that = this
			if (row) {
				that.chapterForm.chapterId = row.chapterId
				that.chapterForm.chapterTitle = row.chapterTitle
				that.chapterForm.chapterRemark = row.chapterRemark
				that.chapterForm.chapterWeight = row.chapterWeight
			} else {
				that.chapterForm.chapterId = ''
				that.chapterForm.chapterTitle = ''
				that.chapterForm.chapterRemark = ''
				that.chapterForm.chapterWeight = ''
				that.chapterForm.chapterType = '0'
			}
			that.chapterForm.visible = true
		},
		closeChapter() {
			this.$refs['chapterForm'].resetFields();
			this.chapterForm.visible = false
		},
		openTopic(row) {
			let that = this
			if (!that.selectChapter) {
				that.$message({message: '请先选择章节', type: "warning"});
				return;
			}
			if (row) {
				that.topicForm.topicId = row.topicId
				that.topicForm.topicContent = row.topicContent
				that.topicForm.topicTitle = row.topicTitle
				that.topicForm.topicType = row.topicType  + ''
				that.topicForm.topicLevel = row.topicLevel + ''
				that.topicForm.topicAnswer = row.topicAnswer + ''
				that.topicForm.topicAnswers = row.topicAnswers || []
				that.topicForm.options = row.options || []
				that.topicForm.topicAnalysis = row.topicAnalysis
			} else {
				that.topicForm.topicId = ''
				that.topicForm.topicContent = '-'
				that.topicForm.topicTitle = ''
				that.topicForm.topicType = '0'
				that.topicForm.topicLevel = '0'
				that.topicForm.topicAnswer = ''
				that.topicForm.topicAnswers = []
				that.topicForm.options = []
				that.topicForm.topicAnalysis = ''
				for(var i = 0; i < 4; i++){
					that.addOption(i)
				}
			}
			that.topicForm.visible = true

		},
		closeTopic() {
			this.$refs['topicForm'].resetFields();
			this.topicForm.visible = false
		},
		openTopicDetail(row) {
			this.topicDetail.topic = row
			this.topicDetail.visible = true
		},
		closeTopicDetail() {
			this.topicDetail.visible = false
		},
		typeInput(val){
			this.$refs["topicForm"].validateField("topicType", (valid) => {
				console.log(valid)
			});
		},
		levelInput(val){
			this.$refs["topicForm"].validateField("topicLevel", (valid) => {
				console.log(valid)
			});
		},
		saveChapter() {
			let that = this
			this.$refs['chapterForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveChapter', that.chapterForm).then(function (resp) {
						if (resp.status == 0) {
							that.chapterForm.visible = false
							that.chapterForm.chapterType = 0
							that.chapterForm.chapterTitle = ''
							that.getChapters()
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveTopic() {
			let that = this
			if (!that.topicForm.topicAnswers) {
				that.topicForm.topicAnswers = []
			}
			if (!that.topicForm.options) {
				that.topicForm.options = []
			}
			this.$refs['topicForm'].validate((valid) => {
				if (valid) {
					if (that.topicForm.topicType * 1 == 0 || that.topicForm.topicType * 1 == 1) {
						let ops = [];
						for (let oIndex in that.topicForm.options) {
							let option = that.topicForm.options[oIndex]
							option.optionAnswer = 0
							if (that.topicForm.topicType * 1 == 0) {
								if (that.topicForm.topicAnswer === option.optionId) {
									option.optionAnswer = 1
								}
							}
							if (that.topicForm.topicType * 1 == 1) {
								for (let aIndex in that.topicForm.topicAnswers) {
									if (that.topicForm.topicAnswers[aIndex] === option.optionId) {
										option.optionAnswer = 1
									}
								}
							}
							ops.push(option)
						}
						that.topicForm.options = ops
					}
					console.log(that.topicForm)
					postRequst('/admin/saveTopic?chapterId=' + that.selectChapter.chapterId, that.topicForm).then(function (resp) {
						if (resp.status == 0) {
							that.getTopics()
							that.topicForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delChapter(chapterId) {
			let that = this
			postRequst('/admin/deleteChapter', {chapterId: chapterId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getChapters()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		delTopic(topicId) {
			let that = this
			postRequst('/admin/deleteTopic', {chapterId: that.selectChapter.chapterId, topicId: topicId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getTopics()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		addOption(i) {
			if(this.topicForm.options.length == 6){
				this.$message({message: '不能超过6个选项', type: "error"});
				return false
			}
			this.topicForm.options.push({
				optionId: Date.now() + (i?i:''),
				optionText: '',
				optionAnswer: 0,
				optionTime: getNowDate()
			});
		},
		removeOption(item) {
			var index = this.topicForm.options.indexOf(item)
			if (index !== -1) {
				this.topicForm.options.splice(index, 1)
			}
		},
		chapterSelectionChange(e){
			this.chapterSelection = e.map((item) => item.chapterId);
		},
		topicSelectionChange(e){
			this.topicSelection = e.map((item) => item.topicId);
		},
		delAllChapter(){
			let that = this
			if(!that.chapterSelection || that.chapterSelection.length == 0){
				that.$message({message: '请勾选', type: "error"});
				return false
			}
			that.$confirm('是否多个删除已选中的章节?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
				// chapterTable
	          	postRequst('/admin/delAllChapter', that.chapterSelection).then(function (resp) {
					if (resp.status == 0) {
						that.getChapters()
						that.$message({message: resp.msg, type: "success"});
					} else {
						that.$message({message: resp.msg, type: "error"});
					}
				})
	        }).catch(() => {});
		},
		delAllTopic(){
			let that = this
			if(!that.topicSelection || that.topicSelection.length == 0){
				that.$message({message: '请勾选', type: "error"});
				return false
			}
			that.$confirm('是否多个删除已选中的题目?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
				// topicTable
	          	postRequst('/admin/delAllTopic', that.topicSelection).then(function (resp) {
					if (resp.status == 0) {
						that.getTopics()
						that.$message({message: resp.msg, type: "success"});
					} else {
						that.$message({message: resp.msg, type: "error"});
					}
				})
	        }).catch(() => {});
		}
	}
	function vueCreated() {
		let that = this
		that.getChapters()
	}

	// 初始化VUE
	/**new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});**/
</script>

</html>